<template>
  <div class="app-container">
      <eHeaderPeople :query="query" :dict="dict" :sup_this="sup_this"/>
      <!--表格渲染-->
      <el-table v-loading="loading" :data="data" size="small" style="width: 100%;" @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column prop="deviceName" min-width="100px" label="设备名称"/>
        <el-table-column prop="deviceIp" min-width="100px" label="设备IP"/>
        <el-table-column prop="devicePort" label="设备端口"/>
        <el-table-column label="设备区域">
          <template slot-scope="scope">
            <div v-for="item in dict.area" :key="item.id">
              <span v-if="scope.row.deviceArea==item.id">{{ item.areaName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="deviceNum" label="设备编号"/>
        <el-table-column prop="deviceType" label="设备类型"/>
        <el-table-column prop="deviceModel" label="设备型号"/>
        <el-table-column prop="deviceGrade" label="设备级别"/>
        <el-table-column prop="manufacturer" label="设备厂商"/>
      </el-table>
      <!--分页组件-->
      <el-button
        v-for="(item,index) in directive"
        class="filter-item"
        size="mini"
        style="margin-top: 8px"
        plain
        type="success"
        @click="sendDirective(item.value)">{{item.label}}
      </el-button>
      <el-pagination
        :total="total"
        style="margin-top: 8px;float:right"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"/>
  </div>
</template>

<script>
  import initData from '@/mixins/initData'
  import {parseTime} from '@/utils/index'
  import eHeaderPeople  from './module/header_people'
  import {getDict,getDirective} from '@/api/peopleDevice'
  export default {
    components: {eHeaderPeople},
    mixins: [initData],
    data() {
      return {
        multipleSelection:[],
        height: document.documentElement.clientHeight - 115 + 'px;',
        delLoading: false, sup_this: this,
        dict: {},
        directive:[]
      }
    },
    created() {
      this.$nextTick(() => {
        this.init()
        this.getDict()
        this.getDirective()
      })
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      sendDirective(a){
        alert(a);
      },
      parseTime,
      getDict(){
        getDict().then(res => {
          this.dict = res
        }).catch(err => {
          console.log(err.response.data.message)
        })
      },
      getDirective(){
        getDirective().then(res => {
          this.directive = res
        }).catch(err => {
          console.log(err.response.data.message)
        })
      },
      beforeInit() {
        this.url = 'api/peopleDevice'
        const sort = 'id,desc'
        this.params = {page: this.page, size: this.size, sort: sort}
        const query = this.query
        const deviceName = query.deviceName
        const deviceArea = query.deviceArea
        if (deviceName) {
          this.params['deviceName'] = deviceName
        }
        if (deviceArea) {
          this.params['deviceArea'] = deviceArea
        }
        return true
      }
    }
  }
</script>

<style scoped>

</style>
